<template>
  <div class="charts_container">
    <slot name="tit"></slot>
    <div :id="title" class="circleCharts" >
      <div class="nodata" v-if="!data">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      timer: null
    }
  },
  watch: {
    data(newv) {
      this._initCharts()
    }
  },
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      const el = this.title ? document.getElementById(this.title) : null
      if(!this.data.data || !el) {
          if(this.$echarts) {
              this.$echarts.dispose(el)
              el.innerHTML = `<div class="nodata">暂无数据</div>`
          }
          return
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(el)
      let titles = this.data.names.reverse()
      
      let dataKey = Object.keys(this.data.data)
      let values = dataKey.map((item, index) => {
        const rs = {
            'name': titles[index],
            nameTextStyle: {
                fontSize: this.$options.filters.fontSize(0.12)
            },
            'value': this.data.data[dataKey[index]],
            textStyle: {
                fontSize: this.$options.filters.fontSize(0.12)
            }
        }
        return rs
      })
      values = values.reverse()
      let colorList = ['#5E52CD', '#52BED1', '#C17C52']
      const option = {
          tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            //   show:false,
              orient: 'horizontal',
              icon: 'react',
            //   bottom : this.$options.filters.fontSize(0.3),
              width: '40%',
              left: '55%',
              top: '20%',
              itemGap : this.$options.filters.fontSize(0.1),
              itemHeight: this.$options.filters.fontSize(0.12),
              itemWidth: this.$options.filters.fontSize(0.12),
              textStyle: {
                  fontSize: this.$options.filters.fontSize(0.14),
                  color: "#fff"
              },
              data: titles
              
          },
          series: [{
              type: 'pie',
              center: ['30%', '50%'],
              radius: ['40%', '75%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverAnimation: true,
              hoverOffset: this.$options.filters.fontSize(0.10),
              offset: this.$options.filters.fontSize(0.10),
            
              itemStyle: {
                  normal: {
                      color: function(params) {
                          return colorList[params.dataIndex]
                      }
                  }
              },
              label: {
                  show: false,
                  position: 'center',
                  textStyle: {
                    fontSize: this.$options.filters.fontSize(0.14)
                  },
                  rich: {
                      hr: {
                          backgroundColor: 't',
                          borderRadius: 0,
                          width: this.$options.filters.fontSize(0.1),
                          height: this.$options.filters.fontSize(0.1),
                      },
                  }
              },
              labelLine: {
                  normal: {
                      length: this.$options.filters.fontSize(0.12),
                      length2: this.$options.filters.fontSize(0.12),
                      lineStyle: {
                          width: 1
                      }
                  }
              },
              emphasis: {
                label: {
                    show: true,
                    fontSize: this.$options.filters.fontSize(0.16),
                    fontWeight: 'bold',
                    formatter: '{d}%'
                }
              },
              data: values,
              // roseType: 'angle',
          }]
      };





      // 绘制图表
      myChart.setOption(option)

      // 饼状图高亮

      // var count= 0;
      // if(this.timer) {
      //   clearInterval(this.timer)
      // }
      // this.timer= setInterval(function () {

      //   myChart.dispatchAction({

      //     type: 'downplay',

      //     seriesIndex: 0

      //   });

      //   myChart.dispatchAction({

      //     type: 'highlight',

      //     seriesIndex: 0,

      //     dataIndex: (count)% 10

      //   });
      //   count++
      //   if (count>= option.series[0].data.length) {

      //     count= 0;

      //   }

      // },3000);

          }

        }
        
      }
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: calc(100% - 40px);
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
  .circleCharts {
    width: 100%;
    height: 100%;
  }
}
</style>